<template>
  <div class="draw">
    <div class="background"></div>
    <div class="point">
      <div class="segment segment-1"><span>天然气</span></div>
      <div class="segment segment-2"><span>燃气机组</span></div>
      <div class="segment segment-3"><span>换热机</span></div>
      <div class="segment segment-4"><span>溴化锂机组</span></div>
    </div>
    <div class="tag tag-1">
      <div>
        <span class="tag-title">进口流量：</span>
        <span class="tag-label is-label--warning"
          >{{ obj.dnjkll | noDataFormat }}t/h</span
        >
      </div>
      <div>
        <span class="tag-title">供热功率：</span>
        <span class="tag-label is-label--warning"
          >{{ obj.dngrgl | noDataFormat }}kW</span
        >
      </div>
      <div>
        <span class="tag-title">能源转换效率：</span>
        <span class="tag-label is-label--warning"
          >{{ obj.nyzhxl | noDataFormat }}%</span
        >
      </div>
      <div>
        <span class="tag-title">单位时间燃气消耗量：</span>
        <span class="tag-label is-label--warning"
          >{{ obj.dwsjrqxhl | noDataFormat }}m³/h</span
        >
      </div>
    </div>
    <div class="tag tag-2">
      <div>
        <span class="tag-title">进口流量：</span>
        <span class="tag-label is-label--error"
          >{{ obj.hrjckll | noDataFormat }}t/h</span
        >
      </div>
      <div>
        <span class="tag-title">出口流量：</span>
        <span class="tag-label is-label--error"
          >{{ obj.hrjckll | noDataFormat }}kW</span
        >
      </div>
      <div>
        <span class="tag-title">压力：</span>
        <span class="tag-label is-label--error"
          >{{ obj.hrjyl | noDataFormat }}kPa</span
        >
      </div>
      <div>
        <span class="tag-title">转换效率：</span>
        <span class="tag-label is-label--error"
          >{{ obj.hrjzhxl | noDataFormat }}%</span
        >
      </div>
      <div>
        <span class="tag-title">能耗：</span>
        <span class="tag-label is-label--error">{{ obj.hrjnh | noDataFormat }}kW</span>
      </div>
    </div>
    <div class="tag tag-3">
      <div>
        <span class="tag-title is-title-short">进口流量：</span>
        <span class="tag-label is-label--error"
          >{{ obj.dcjkll | noDataFormat }}t/h</span
        >
      </div>
      <div>
        <span class="tag-title is-title-short">出口流量：</span>
        <span class="tag-label is-label--error"
          >{{ obj.dcckll | noDataFormat }}kW</span
        >
      </div>
      <div>
        <span class="tag-title is-title-short">压力：</span>
        <span class="tag-label is-label--error">{{ obj.dcyl | noDataFormat }}kPa</span>
      </div>
      <div>
        <span class="tag-title is-title-short">温度：</span>
        <span class="tag-label is-label--error">{{ obj.dcwd | noDataFormat }}℃</span>
      </div>
    </div>
    <div class="tag tag-4">
      <div>
        <span class="tag-title is-title-short">输入热功率：</span>
        <span class="tag-label is-label--warning"
          >{{ obj.dcsrrgl | noDataFormat }}t/h</span
        >
      </div>
      <div>
        <span class="tag-title is-title-short">输入冷功率：</span>
        <span class="tag-label is-label--warning"
          >{{ obj.dcsrlgl | noDataFormat }}kW</span
        >
      </div>
      <div>
        <span class="tag-title is-title-short">转换效率：</span>
        <span class="tag-label is-label--warning"
          >{{ obj.dczhxl | noDataFormat }}%</span
        >
      </div>
      <div>
        <span class="tag-title is-title-short">能耗：</span>
        <span class="tag-label is-label--warning"
          >{{ obj.dcnh | noDataFormat }}kW</span
        >
      </div>
    </div>
    <div class="tip tip-1">
      电能
    </div>
    <div class="tip tip-2">
      热能
    </div>
    <div class="tip tip-3">
      冷能
    </div>
  </div>
</template>
<script>
import { getHotColdPipeDetails } from "@/api/scada";

export default {
  name: "draw",
  props: {},
  data() {
    return {
      obj: {}
    };
  },
  computed: {},
  created() {},
  mounted() {
    getHotColdPipeDetails().then((res) => {
      if (res.code === 200) {
        this.obj = res.result || {};
      }
    });
  },
  watch: {},
  methods: {

  },
  components: {}
};
</script>

<style scoped lang="scss">
.draw {
  padding-left: 130px;
  padding-right: 500px;
  position: relative;
  .background {
    width: 1000px;
    height: 270px;
    background-image: url("../../../../assets/img/coldHotElectric/14.png");
    background-size: 100%;
    background-repeat: no-repeat;
    background-position: center;
    position: relative;
  }
}

.tag {
  position: absolute;
  left: 0;
  top: 0;
  background: #f7f7f7;
  padding: 10px;
}

.tag-title {
  color: #666;
  width: 140px;
  display: inline-block;
}

.tag-title.is-title-short {
  width: 100px;
}

.tag-label.is-label--sussess {
  color: #92d66e;
}

.tag-label.is-label--warning {
  color: #9a9aff;
}

.tag-label.is-label--normal {
  color: #47a4f8;
}

.tag-label.is-label--error {
  color: #fc807e;
}

.tag.tag-1 {
  left: 440px;
  top: 10px;
}

.tag.tag-2 {
  left: 440px;
  top: 130px;
}

.tag.tag-3 {
  left: 955px;
  top: 22px;
}

.tag.tag-4 {
  left: 955px;
  top: 167px;
}

.tip {
  position: absolute;
  left: 0;
  top: 0;
  line-height: 30px;
  font-size: 16px;
  text-align: center;
  width: 88px;
  color: #ffffff;
  font-weight: bold;
}

.tip.tip-1 {
  background: #ff9a00;
  left: 1132px;
  top: -10px;
}

.tip.tip-2 {
  background: #fc807e;
  left: 1132px;
  top: 115px;
}

.tip.tip-3 {
  background: #46a4f7;
  left: 1132px;
  top: 150px;
}

.point {
  position: absolute;
  left: 1350px;
  top: 0;
  font-size: 18px;
  width: 150px;
  display: flex;
  flex-wrap: wrap;
  .segment {
    line-height: 30px;
    padding-left: 40px;
    position: relative;
    margin-bottom: 20px;
    margin-right: 10px;
  }
  .segment::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    display: inline-block;
    width: 30px;
    height: 30px;
    background-position: center;
    background-size: 100%;
    background-repeat: no-repeat;
  }

  .segment.segment-1:before {
    background-image: url("../../../../assets/img/coldHotElectric/12.png");
  }
  .segment.segment-2:before {
    background-image: url("../../../../assets/img/coldHotElectric/2.png");
  }
  .segment.segment-3:before {
    background-image: url("../../../../assets/img/coldHotElectric/3.png");
  }
  .segment.segment-4:before {
    background-image: url("../../../../assets/img/coldHotElectric/4.png");
  }
}
</style>
